<template>
	<div class="container">
		<p class="text-title">待办事项</p>
		<div class="nav-menu">
			<el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleTabChange">
				<el-tab-pane label="待审核" name="02-1"></el-tab-pane>
				<el-tab-pane label="审核通过" name="02-3"></el-tab-pane>
				<el-tab-pane label="审核驳回" name="02--1"></el-tab-pane>
			</el-tabs>

			<ul class="nav-menu" v-if="dataList.length>0">
				<li class="nav-menu-item flex" v-for="(item, index) in dataList" :key="index" @click="handleLinkto(item)">
					<!-- <el-avatar shape="square" class="icon" :style="{ background: item.color }"> {{ item.noticeTitle.substring(0, 1) }} </el-avatar> -->
					<div class="right">
						<p class="label">{{ item.noticeTitle }}</p>
						<p class="tip text-overflow" v-html="item.noticeContent"></p>
						<p class="time">{{ item.createTime }}</p>
					</div>
				</li>
				<li v-if="totalNum > 5">
					<el-button text type="primary" @click="handleMore"
						>查看更多
						<el-icon>
							<icon-right theme="outline" size="24" />
						</el-icon>
					</el-button>
				</li>
			</ul>
      <el-empty v-else description="无数据" />
		</div>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod'

const router  = useRouter()
const activeName = ref('02-1')
const totalNum = ref(6)
const dataList = ref([])
const nowRowData = ref({} as any)

const handleLinkto = (item?: any) => {
	nowRowData.value = item
	apiMod
		.view_sysNoticeRecord_read({
			idList: [item.id],
		})
		.then(() => {
      ElMessage({
        type:'success',
        message: '已阅读',
      })
		})
}
const handleMore = () => {
  router.push('/instOperate/approvalManage/index')
}

const handleTabChange = () => {
	getInitData()
}
const getInitData = () => {
	apiMod
		.view_todo_page({
			noticeType: activeName.value,
			pageParaPO: { size: 6, current: 1 },
		})
		.then((res) => {
      totalNum.value = res.data.total
			dataList.value = res.data.records.map((item) => {
				return {
					...item,
					color: ['#00CFAD', '#0052D9'][Math.floor(Math.random() * 2)],
				}
			})
		})
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
.container {
	width: 100%;
	height: auto;
}
.text-title {
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 16px;
	text-align: left;
	color: #1c1c28;
	padding: 11px 0;
}
.nav-menu {
	background: #fff;
	padding: 10px;
	border-radius: 10px;
  min-height:428px;

	&-item {
		margin: 6px;
		border-bottom: 1px solid #f5f5f5;

		.right {
			max-width: calc(100% - 50px);

			.label {
				color: #000;
				font-size: 1rem;
				font-weight: 700;
			}

			.tip {
				color: #000;
				font-weight: 400;
				opacity: 0.5;
				font-size: 0.88rem;
				margin: 0.41rem 0 0.81rem 0;
			}

			.time {
				color: #000;
				font-weight: 400;
				font-size: 0.88rem;
				opacity: 0.8;
				margin-bottom: 0.41rem;
			}
		}

		.icon {
			width: 48px;
			height: 48px;
			border-radius: 4px;
			margin-right: 10px;
			font-weight: 700;
			font-size: 26px;
			color: #feffff;
		}
	}
}
</style>
